<template>
  <div>
    <!-- 基本属性 -->
    <div>
      <el-form label-width="80px" size="mini">
        <el-form-item label="分辨率">
          <el-select v-model="sizeType" @change="handleSizeChange">
            <el-option v-for="item in sizeList" :key="item.w+'_'+item.h"
                       :value="item.w+'_'+item.h"
                       :label="item.w+'×'+item.h"></el-option>
            <el-option value="custom" label="自定义"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="宽" v-if="sizeType==='custom'">
          <el-input-number size="mini" controls-position="right" :min="800" v-model="item.width"/>
        </el-form-item>
        <el-form-item label="高" v-if="sizeType==='custom'">
          <el-input-number size="mini" controls-position="right" :min="600" v-model="item.height"/>
        </el-form-item>
        <el-form-item label="背景颜色">
          <el-color-picker v-model="item.backgroundColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="背景图片">
          <uploader v-model="item.backgroundImg"></uploader>
        </el-form-item>
      </el-form>
    </div>
    <el-divider/>

    <div>
      <div>全局数据源</div>
      <el-button type="text" @click="addGlobalDataSource">添加</el-button>
      <el-table :data="dataSources" style="width: 100%" size="mini">
        <el-table-column prop="dataKey" label="数据key">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.remark" placement="top-start">
              <el-button type="text" @click="editGlobalDataSource(scope.row)">{{scope.row.dataKey}}</el-button>
            </el-tooltip>

          </template>
        </el-table-column>
        <el-table-column prop="remark" label="数据源">
          <template slot-scope="scope">
            <span v-if="scope.row.dataSource && scope.row.dataSource.name">已配置</span>
            <span v-else>未配置</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" width="50">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-delete" @click="delGlobalDataSource(scope.row, scope.$index)"></el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>

    <page-data-source-edit v-if="globalDsEditVisible" :data="selectGlobalDs"
                           @close="globalDsEditVisible=false"/>
  </div>
</template>
<script>
  import vpd from '../../mixins/vpd';
  import Uploader from "../uploader";
  import PageDataSourceEdit from './pageDataSourceEdit';

  export default {
    mixins: [vpd],
    components: {
      Uploader,
      PageDataSourceEdit
    },
    props: {
      item: {
        default() {
          return {}
        },
        type: Object
      }
    },
    data() {
      return {
        sizeType: null,
        sizeList: [
          {w: 1024, h: 768},
          {w: 1366, h: 768},
          {w: 1280, h: 800},
          {w: 1440, h: 900},
          {w: 1600, h: 900},
          {w: 1920, h: 1080},
        ],
        width: 1920,
        height: 1080,

        //全局数据源
        selectGlobalDs: {},
        globalDsEditVisible: false,

      }
    },
    computed: {
      dataSources() {
        return this.$vpd.state.dataSources;
      },
      widgetStyleName() {
        if (this.item && this.item.type) {
          return this.item.type + '-style';
        }
      },
      pageSize() {
        const {width, height} = this.item;
        return {width, height};
      }
    },
    watch: {
      pageSize: function (val) {
        // console.log('pageSizeChange', val);
        this.initSizeSelect(this.item);

        //通知其他组件重新计算页面尺寸
        this.$vpd.$emit('pageSizeChange', val);
      }
    },
    beforeMount() {
      this.initSizeSelect(this.item);
    },
    methods: {
      initSizeSelect(val) {
        for (let i = 0; i < this.sizeList.length; i++) {
          const item = this.sizeList[i];
          if (item.w === val.width && item.h === val.height) {
            this.sizeType = item.w + '_' + item.h;
            return;
          }
        }
        this.sizeType = 'custom';
      },
      handleSizeChange(val) {
        if (val !== 'custom') {
          const arr = val.split('_');
          this.item.width = arr[0];
          this.item.height = arr[1];
        }
      },
      addGlobalDataSource() {
        this.selectGlobalDs = {};
        this.globalDsEditVisible = true;
      },
      editGlobalDataSource(row) {
        this.selectGlobalDs = row;
        this.globalDsEditVisible = true;
      },
      delGlobalDataSource(row, index) {
        this.$vpd.commit('delGlobalDataSource', index);
      }
    }

  }
</script>
